<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>蓉车宝</title>
    <link rel="stylesheet" type="text/css" href="css/base.css"/>
    <link rel="stylesheet" type="text/css" href="css/home.css"/>
    <link rel="stylesheet" type="text/css" href="city/city.css">
    <link rel="stylesheet" type="text/css" href="css/shoppingCar.css">
    <script type="text/javascript" src="script/jquery-1.8.0.min.js"></script>
    <script type="text/javascript" src="script/home_ban.js"></script>
    <script type="text/javascript" src="script/eg_top_search.js"></script>
    <script type="text/javascript" src="script/city.js"></script>
    <script type="text/javascript" src="script/snncar.js"></script>
    <script type="text/javascript" src="script/jquery.SuperSlide.2.1.1.js"></script>
    <!--引入vue和Axios.js 先导入vue  再导入axios -->
    <script src="plug/vue/dist/vue.js"></script>
    <script src="plug/axios/dist/axios.js"></script>
    <script src="script/commons.js"></script>

    <!--导航登陆网页版下拉-->
    <script type="text/javascript">
        $(function () {
            var setTime;
            $(".egc-top .nav-cent .operate").hover(function () {
                var _this = $(this);
                setTime = setTimeout(function () {
                    _this.find(".sec-version").slideDown(200);
                    _this.find("i").removeClass("icon-angle-down").addClass("icon-angle-up");
                }, 200);
            }, function () {
                if (setTime) {
                    clearTimeout(setTime);
                }
                $(".egc-top .nav-cent .sec-version").slideUp(200);
                $(".egc-top .nav-cent .operate i").removeClass("icon-angle-up").addClass("icon-angle-down");
            });
        });
    </script>

    <!--下拉导航关闭-->
    <script type="text/javascript">
        $(function () {
            $('.menu-mb i').click(function () {
                $(".navigation-mb-list").slideDown(300);
            });
            $('.navigation-mb-list .list-close-btn').click(function () {
                $(".navigation-mb-list").slideUp(300);
            });
        });
    </script>

    <script type="text/javascript">
        $(function () {
            var scroll_heitht = $('body').offset().top;
            var isShow = true;
            $(window).scroll(function () {
                if ($(window).scrollTop() > scroll_heitht && isShow) {
                    $('.stress-search-box').slideDown(200);
                } else {
                    $('.stress-search-box').slideUp(200);
                }
            });
            $('.stress-close a').click(function () {
                isShow = false;
                $('.stress-search-box').slideUp(200).unbind(window, aa);
            });
        });
    </script>
</head>
<body>
<div id="userDiv">
    <div class="egc-top">
        <div class="nav-cent">
            <div class="top-r">
          <span id="noLoginSpan" style="display: none">
                    <a href="#" id="b-regist" @click="registerBtn()">注册</a>|
                    <a href="#" id="b-login" class="b-login">登陆</a>
                </span>
                <span id="loginSpan" style="display: none">
                  欢迎你!<span id="loginUserName" style="color: red"></span>
                </span>
            </div>
            <div class="top-l">全国统一客服热线：XXX</div>
            <div class="clear_fix"></div>
        </div>
    </div>
    <div class="w">
        <div class="cart-filter-bar" style="color: red;font-weight: bold;font-size: 16px;">
            <ul class="switch-cart">
                <li class="switch-cart-item">
                    <a href="" style="color: red;"><em>全部商品</em>
                        <span class="number" style="margin-left: 10px;">{{total}}</span>
                    </a>
                </li>
            </ul>
        </div>
        <div class="clr"></div>
        <div class="cart-thead" >
            <div class="column t-checkbox">
                <div class="cart-checkbox" >
                    <input type="checkbox" name="select-all" class="jdcheckbox">
                </div>
                全选
            </div>
            <div class="column t-goods">商品</div>
            <div class="column t-props">&nbsp;</div>
            <div class="column t-price">单价</div>
            <div class="column t-quantity">数量</div>
            <div class="column t-sum">小计</div>
            <div class="column t-action">操作</div>
        </div>
        <div class="cart-tbody" v-for="car in shopCarList">
            <div class="shop" style="">
                <div class="cart-checkbox">
                    <input type="checkbox" name="checkShop" class="jdcheckbox">
                </div>
                <span class="shop-txt">
                    <a class="shop-name">
                        <li style="margin-top: -10px">
                            {{car.shopName}}

                        </li>
                    </a>
                </span>
            </div>
            <div class="item-list" v-for="child in car.children">
                <div class="item-combine">
                    <div class="item-item item-seleted">
                        <div class="item-form">
                            <div class="cell p-checkbox">
                                <div class="cart-checkbox">
                                    <input v-if="child.check == 1" @click="selectOrNot(child)" type="checkbox" name="checkItem" class="jdcheckbox" checked="">
                                    <input v-if="child.check == 0" @click="selectOrNot(child)" type="checkbox" name="checkItem" class="jdcheckbox">
                                    <span class="line-circle"></span>
                                </div>
                            </div>
                            <div class="cell p-goods">
                                <div class="goods-item">
                                    <div class="p-img ">
                                        <a :href="child.cover" target="_blank" rel="noreferrer" :title="child.title">
                                            <img style="width: 80px;height: 80px;" :src="child.cover" :alt="child.title">
                                        </a>
                                    </div>
                                    <div class="p-msg">
                                        <div class="p-name">
                                            <a href="" target="_blank" rel="noreferrer" :title="child.title">
                                                <i class="product-icon " title=""></i>
                                                {{child.title}}
                                            </a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="cell p-props">
                                <div class="props-txt"><span class="">{{child.title}}</span></div>
                            </div>
                            <div class="cell p-price">
                                <span class="p-price-cont">￥{{child.costprice}}</span>
                            </div>
                            <div class="cell p-quantity" style="margin-left:63px;">
                                <div class="cart-number quantity ">
                                    <button disabled="" class="cart-number-dec is-disabled">
                                        <i v-if="child.quantity < 1" class="cart-icon-subt" style="cursor: not-allowed">-</i>
                                        <i v-if="child.quantity > 0" class="cart-icon-subt" @click="subQuantity(child)" style="cursor: pointer">-</i>
                                    </button>
                                    <div class="cart-input">
                                        <input class="cart-input-o" min="1" max="3" :value="child.quantity">
                                    </div>
                                    <button class="cart-number-inc">
                                        <i class="cart-icon-add" @click="addQuantity(child)" style="cursor: pointer">+</i>
                                    </button>
                                </div>
                            </div>
                            <div class="cell p-sum"><strong>¥{{child.subtotal}}</strong></div>
                            <div class="cell p-ops" style="margin-left: 34px;">
                                <a href="#none" class="p-ops-item" style="color: red" @click="deleteById(child.id)">删除</a>
                            </div>
                        </div>
                        <div class="product-extra mb10"></div>
                        <div class="item-line"></div>
                    </div>
                </div>
            </div>
            <br/>
            <br/>
        </div>
        <div>
            <div>
                <div style="padding-bottom: 52px;"></div>
                <div class="cart-floatbar cart-floatbar-fixed"
                     style="position: fixed; transform: translateZ(0px); top: auto; bottom: 0px;">
                    <div class="cart-floatbar">
                        <div class="cart-toolbar">
                            <div class="toolbar-wrap"><input type="hidden" id="checkedCartState" value="1">
                                <div class="selected-item-list hide" style="display: none;"></div>
                                <div class="options-box">
                                    <div class="left">
                                        <div class="select-all"><input type="checkbox" class="jdcheckbox"
                                                                       >全选
                                        </div>
                                        <div class="operation"><a href="#none" class="opt-batch-remove">删除选中的商品</a>
                                            <a href="#none" class="opt-batch-follow">移入关注</a>
                                            <a href="#none" class="opt-cleaner" title="亲，点我可快速清空购物车商品哦！">
                                                <strong @click="flushShoppingCar()">清空购物车</strong>
                                            </a>
                                        </div>
                                    </div>
                                    <div class="right">
                                        <div class="combine">
                                            <div class="btn-area"><a class="common-submit-btn" href="#none"
                                                                   >去结算<b></b></a>
                                            </div>
                                            <div class="price-sum">
                                                <div>
                                                    <div class="price-sum-amount">
                                                        <div class="price-show"><span class="txt">总价：</span><span
                                                                class="price priceShow"><em>￥6.15</em></span><b
                                                                class="ml5 price-tips"></b>
                                                            <div class="price-tipsbox-new">
                                                                <div class="ui-tips-main">不含运费及送装服务费</div>
                                                                <span class="price-tipsbox-arrow"></span></div>
                                                        </div>
                                                        <span class="amount-sum">已选择<em>1</em>件商品<b
                                                                class="up"></b></span></div>
                                                    <div class="price-sum-extra"></div>
                                                </div>
                                            </div>
                                            <div class="clr"></div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="clr"></div>
    </div>
</div>
</body>
<script type="text/javascript">
    new Vue({
        el:"#userDiv",
        data:{
            shoppingCarInfo:{
                shopName:"",
                shopId:null,
                title:"",
                info:"", //简介
                costprice:"", //价格
                quantity:1, //数量
                subtotal:null, //小计
                check:0, //1选中 0未选中
                carId:null,
                userId:null
            },
            shopCarList:[],
            total:null
        },
        methods:{
            //选中
            selectOrNot(car){
              if (car.check == 1){
                  car.check = 0
              }else {
                  car.check = 1
              }
                console.log("selectOrNot",car)
              this.edit(car);
            },
            subQuantity(car){
                car.quantity-=1;
                //console.log("car",car)
                this.edit(car);

            },
            addQuantity(car){
                car.quantity+=1;
                this.edit(car);
            },
            edit(car){
                this.$http.put("/shoppingcar",car)
                    .then(result =>{
                        result = result.data;
                        if (result.success){
                            //alert("修改成功!")

                        }else {
                            //alert("修改失败!")
                        }
                    })
                    .catch(result =>{
                        alert("网络错误!")
                    })
            },
            //单个删除
            deleteById(id){
                this.$http.delete("/shoppingcar/"+id)
                    .then(result =>{
                        result = result.data;
                        if (result.success){
                            this.getShoppingCarInfo(this.shoppingCarInfo.userId);
                            alert("删除成功!")

                        }else {
                            alert("删除失败!")
                        }
                    })
                    .catch(result =>{
                        alert("网络错误!")
                    })
            },
            //清空购物车
            flushShoppingCar(){
                let userId =this.shoppingCarInfo.userId;
                console.log("id",userId)
                this.$http.delete("/shoppingcar/flushshoppingcar/"+userId)
                    .then(result =>{
                        result = result.data;
                        if (result.success){
                            this.getShoppingCarInfo(userId);
                            alert("清空购物车成功!")
                        }else {
                            alert("清空购物车失败!")
                        }
                    })
                    .catch(result =>{
                        alert("网络错误!")
                    })
            },
            //通过userid获取购物车信息
            getShoppingCarInfo(userId){
                console.log("userId:",userId)
                this.$http.post("/shoppingcar/getshoppingcarbyuserid/"+userId)
                    .then(result =>{
                        result = result.data;
                        if (result.success){
                            this.shopCarList = result.obj.rows;
                            this.total = result.obj.total;
                            //alert("获取购物车信息成功!")
                            console.log("购物车信息:",this.shopCarList)
                        }else {
                            alert("获取购物车信息失败!")

                        }
                    })
                    .catch(result =>{
                        alert("网络错误!")
                    })
            }
        },
        mounted(){
            let userId = getUrlParam().userId;
            this.shoppingCarInfo.userId = userId;
            //通过userid获取购物车信息
            this.getShoppingCarInfo(userId);
            // 页面一加载完毕,判断localStorage中有没有loginUser,如果有就展示欢迎你!xxx 否则就展示 登录 注册按钮
            let loginUser = JSON.parse(localStorage.getItem("loginUser"));
            if(loginUser){
                $("#noLoginSpan").hide(); // 隐藏登录 注册按钮
                $("#loginSpan").show();   // 展示 欢迎你!xxxx
                $("#loginUserName").text(loginUser.username);
            }else{
                $("#noLoginSpan").show();
            }
        }
    })
</script>
</html>